<template>
  <div class="indexpage-container">
    <div class="sidebar">
      <button @click="switchPage('productInfo')">产品信息</button>
      <button @click="switchPage('favoriteManage')">收藏管理</button>
      <button @click="switchPage('orderInfo')">订单信息</button>
      <button @click="switchPage('personalRecommend')">个性推荐</button>
      <button @click="switchPage('personalCenter')">个人中心</button>
    </div>
    <div class="content">
      <component :is="currentPageComponent"></component>
    </div>
  </div>
</template>

<script>
import ProductInfoPage from './buyer/product_info.vue';
import FavoriteManagePage from './buyer/favorite_manage.vue';
import OrderInfoPage from './buyer/order_info.vue';
import PersonalRecommendPage from './buyer/personal_recommend.vue';
import PersonalCenterPage from './buyer/personal_center.vue';

export default {
  name: 'BuyerPage',
  data () {
    return {
      currentPageComponent: ProductInfoPage // 默认显示产品信息页面
    }
  },
  methods: {
    switchPage(page) {
      const pageComponentMap = {
        'productInfo': ProductInfoPage,
        'favoriteManage': FavoriteManagePage,
        'orderInfo': OrderInfoPage,
        'personalRecommend': PersonalRecommendPage,
        'personalCenter': PersonalCenterPage
      };
      this.currentPageComponent = pageComponentMap[page]; // 切换到对应的组件
    }
  },
  mounted() {},
  computed: {}
}
</script>

<style scoped>
@import '@/assets/css/indexpage.css';
</style>